<template>
    <div>
        <h1>Acom</h1>
        <!-- <h1>{{ $store.state.num }}</h1> -->
        <h1>{{ num }}</h1>
        <!-- <h1>{{ $store.getters.evenOrOdd }}</h1> -->
        <h1>{{ evenOrOdd }}</h1>
        <button @click="add">加一</button><br>
        
        <input type="text" v-model="count">
        <button @click="jian">减一</button>

        <button @click="oddAdd">如果是奇数加一</button>
        <button @click="evenJian">如果是偶数减一</button>
    </div>
</template>

<script>
    export default {
        mounted(){
            console.log(this.$store)
            console.log(this.$store.state.num)
        },
        data(){
            return{
                count:''
            }
        },
        // 在computed中可以调用state和getters中的值进行处理
        computed:{
            num(){
                return this.$store.state.num
            },
            evenOrOdd(){
                return this.$store.getters.evenOrOdd
            }
        },
        methods:{
            add(){
                // 在组件Acom中通过commit触发mutations中的add 来改变state中的值
                // this.$store.commit('add','haha')
                this.$store.commit('add',{name:"xixi"})
            },
            jian(){
                this.$store.commit('jian',{count:this.count})
            },
            oddAdd(){
                this.$store.dispatch('oddAdd',{name1:'hh',name2:'xx'})
            },
            evenJian(){
                this.$store.dispatch('evenJian')
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>